<script setup lang="ts">
import productTable from '../../components/productTable.vue'
import Map from '../../components/Map.vue'
import RealTime from '../../components/RealTime.vue'
import WeekSales from '../../components/WeekSales.vue'
import YOYData from '../../components/YOYData.vue'
import YearSales from '../../components/YearSales.vue'
import { closeWebSocket, connectWebSocket } from '@/utils/websocktUtils'

import {
  getDeleteShuiAllDataAPI,
  getDeleteMTAllDataAPI,
  getAllDataAPI,
  getShuiAllDataAPI,
} from '@/services/allData'
import { useWebsocketStore } from '@/stores/modules/websocket'
import { useyanZhengStore } from '@/stores/modules/yanZheng'

const clickCount = ref(0)
const timer = ref()
const delFunc = async () => {
  if (timer.value) {
    clearTimeout(timer.value)
  }
  clickCount.value++
  console.log(clickCount.value)
  timer.value = setTimeout(() => {
    clickCount.value = 0
  }, 500)
  // if (clickCount.value % 3 == 0) {
  //   window.$message.create('模拟数据清空', {
  //     duration: 2000,
  //   })
  // }
  if (clickCount.value >= 3) {
    if (yanZhengStore.index == 'maotai') {
      await getDeleteMTAllDataAPI() //茅台
      await getAllDataAPI(`/product/get/list/data/maotai`) //茅台
    } else if (yanZhengStore.index == 'water') {
      await getDeleteShuiAllDataAPI() //水
      await getShuiAllDataAPI()
    }
    // nextTick(() => {
    //   location.reload()
    // })
    // let date = Date.now()
    // useWebsocketStore().date = date
  }
}
const yanZhengStore = useyanZhengStore()
function clickTab(index: string) {
  yanZhengStore.index = index
  // connectWebSocket()
  useWebsocketStore().date = Math.random()
  console.log('index', index)
}
const a = ref('')
function ifindex() {
  if (yanZhengStore.index == 'water') {
    a.value = '饮用水'
    connectWebSocket('ws://192.168.120.254:2001/websocket')
  } else if (yanZhengStore.index == 'maotai') {
    a.value = '茅台'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'cha') {
    a.value = '茶叶'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'bao') {
    a.value = '包包'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'yifu') {
    a.value = '衣服'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'xie') {
    a.value = '鞋子'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'lang') {
    a.value = '郎酒'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'niunai') {
    a.value = '牛奶'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'jiancai') {
    a.value = '建材'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  } else if (yanZhengStore.index == 'yao') {
    a.value = '药'
    connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  }
}
ifindex()
watch(
  () => yanZhengStore.index,
  () => {
    closeWebSocket()
    ifindex()
  },
)
onMounted(() => {
  // connectWebSocket()
  // if (yanZhengStore.index == 'shui') {
  //   connectWebSocket('ws://192.168.120.4:2001/websocket')
  // } else {
  //   connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
  // }
  // connectWebSocket('ws://192.168.120.4:2001/websocket')
  // connectWebSocket('ws://192.168.120.4:18083/websocket/session/tableName')
})

// // 进入全屏模式
// function enterFullScreen() {
//   const element = document.documentElement; // 获取整个文档元素
//   if (element.requestFullscreen) {
//     element.requestFullscreen();
//   } else if (element.mozRequestFullScreen) {
//     // Firefox
//     element.mozRequestFullScreen();
//   } else if (element.webkitRequestFullscreen) {
//     // Chrome, Safari and Opera
//     element.webkitRequestFullscreen();
//   } else if (element.msRequestFullscreen) {
//     // IE/Edge
//     element.msRequestFullscreen();
//   }
// }

// // 退出全屏模式
// function exitFullScreen() {
//   if (document.exitFullscreen) {
//     document.exitFullscreen();
//   } else if (document.mozCancelFullScreen) {
//     // Firefox
//     document.mozCancelFullScreen();
//   } else if (document.webkitExitFullscreen) {
//     // Chrome, Safari and Opera
//     document.webkitExitFullscreen();
//   } else if (document.msExitFullscreen) {
//     // IE/Edge
//     document.msExitFullscreen();
//   }
// }

// // 切换全屏模式
// function toggleFullScreen() {
//   if (
//     !document.fullscreenElement && // alternative standard method
//     !document.mozFullScreenElement &&
//     !document.webkitFullscreenElement &&
//     !document.msFullscreenElement
//   ) {
//     // current working methods
//     enterFullScreen();
//   } else {
//     exitFullScreen();
//   }
// }
</script>

<template>
  <view class="index">
    <view class="title">
      <view class="text" @click="delFunc">预和科技验伪数据管理系统</view>
      <view class="tabs1">
        <view class="tab"
          ><a
            @click="clickTab('water')"
            :style="
              yanZhengStore.index == 'water'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon.png')`,
                  }
                : ''
            "
            >水</a
          >
        </view>
        <view class="tab"
          ><a
            @click="clickTab('maotai')"
            :style="
              yanZhengStore.index == 'maotai'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon.png')`,
                  }
                : ''
            "
            >茅台</a
          ></view
        >
        <view class="tab"
          ><a
            @click="clickTab('cha')"
            :style="
              yanZhengStore.index == 'cha'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon.png')`,
                  }
                : ''
            "
            >茶叶</a
          ></view
        >
        <view class="tab"
          ><a
            @click="clickTab('xie')"
            :style="
              yanZhengStore.index == 'xie'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon.png')`,
                  }
                : ''
            "
            >鞋子</a
          ></view
        >
        <view class="tab"
          ><a
            @click="clickTab('bao')"
            :style="
              yanZhengStore.index == 'bao'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon.png')`,
                  }
                : ''
            "
            >包包</a
          ></view
        >
      </view>
      <view class="tabs2">
        <view class="tab"
          ><a
            @click="clickTab('yifu')"
            :style="
              yanZhengStore.index == 'yifu'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon_right.png')`,
                  }
                : ''
            "
            >衣服</a
          ></view
        >
        <view class="tab"
          ><a
            @click="clickTab('niunai')"
            :style="
              yanZhengStore.index == 'niunai'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon_right.png')`,
                  }
                : ''
            "
            >牛奶</a
          ></view
        >
        <view class="tab"
          ><a
            @click="clickTab('lang')"
            :style="
              yanZhengStore.index == 'lang'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon_right.png')`,
                  }
                : ''
            "
            >郎酒</a
          ></view
        >
        <view class="tab"
          ><a
            @click="clickTab('jiancai')"
            :style="
              yanZhengStore.index == 'jiancai'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon_right.png')`,
                  }
                : ''
            "
            >建材</a
          ></view
        >
        <view class="tab"
          ><a
            @click="clickTab('yao')"
            :style="
              yanZhengStore.index == 'yao'
                ? {
                    color: '#ffeb47',
                    'background-image': `url('../../static/images/button_active_icon_right.png')`,
                  }
                : ''
            "
            >国药</a
          ></view
        >
      </view>
    </view>
    <view class="content">
      <view class="box">
        <view class="kuang-title"
          >数据注入<img src="../../static/images/titleadorn.png" alt=""
        /></view>
        <view class="data">
          <productTable></productTable>
        </view>
      </view>
      <view class="box"
        ><view class="kuang-map">{{ a }}区域分布</view><Map></Map
      ></view>
      <view class="box">
        <view class="kuang-title"
          >实时监控<img src="../../static/images/titleadorn.png" alt=""
        /></view>
        <view class="data"><RealTime></RealTime> </view>
      </view>
      <view class="box">
        <view class="kuang-title"
          >周销量<img src="../../static/images/titleadorn.png" alt=""
        /></view>
        <view class="data"> <WeekSales></WeekSales></view>
      </view>
      <view class="box">
        <view class="kuang-title"
          >同比数据<img src="../../static/images/titleadorn.png" alt=""
        /></view>
        <view class="data"><YOYData></YOYData></view>
      </view>
      <view class="box">
        <view class="kuang-title"
          >年销量<img src="../../static/images/titleadorn.png" alt=""
        /></view>
        <view class="data"><YearSales></YearSales> </view>
      </view>
    </view>
  </view>

  <!-- <Table></Table> -->
</template>

<style lang="scss" scoped>
//
.index {
  width: 100vw;
  height: 100vh;
  padding-top: 5.6px;
  background: url('../../static/images/bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: space-evenly;
  // align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  .title {
    height: 13vh;
    width: 100%;
    // border: 1px solid #fff;
    margin-bottom: 0.5vh;
    background: url('../../static/images/headeradorn.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-evenly;

    .text {
      // height: 10vh;
      margin-top: 1.8vh;
      width: 31vw;
      color: #fff;
      font-weight: bold;
      font-size: 4.5vh;
      text-align: center;
      text-align-last: justify;
    }
    .tabs1,
    .tabs2 {
      position: absolute;
      color: #5a5ce0;
      display: flex;
      justify-content: space-evenly;
      width: 30vw;
      a {
        width: 100px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 20px;
        color: #00f1ff;
        letter-spacing: 5px;
        padding: 3px 0;
        background-image: url('../../static/images/button_icon.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-decoration: none;
        &:hover {
          color: #ffeb47;
          background-image: url('../../static/images/button_active_icon.png');
        }
      }
      &.tabs1 {
        top: 5vh;
        left: 1.5vw;
      }
      &.tabs2 {
        top: 5vh;
        right: 1.5vw;
        // font-size: 15px;
        a {
          background-image: url('../../static/images/button_icon_right.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }

  .content {
    height: 86vh;
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    .box {
      // border: 1px solid #fff;
      position: relative;

      &:nth-child(1) {
        width: 22.5vw;
        height: 48.5vh;
        background: url('../../static/images/kuang-up.png') no-repeat;
        background-size: 100% 100%;
        .data {
          height: 44vh;
          padding: 1vh;
        }
      }

      &:nth-child(2) {
        width: 48vw;
        height: 48.5vh;
        background: url('../../static/images/kuang-map.png') no-repeat;
        background-size: 100% 100%;
        .kuang-map {
          position: absolute;
          top: -10px;
          font-size: 2.4vh;
          height: 3vh;
          color: #0ff;
          margin-left: 0.8vw;
          margin-top: 1vh;
          // width: 6vw;
          display: inline;

          img {
            margin-top: 2vh;
            margin-left: 0.8vw;
            display: inline;
            width: 11vw;
          }
        }
      }

      &:nth-child(3) {
        width: 22.5vw;
        height: 48.5vh;
        background: url('../../static/images/kuang-up.png') no-repeat;
        background-size: 100% 100%;
        .data {
          height: 44vh;
          padding: 1vh;
        }
      }

      &:nth-child(4) {
        width: 22.5vw;
        height: 33vh;
        background: url('../../static/images/kuang-down.png') no-repeat;
        background-size: 100% 100%;
        .data {
          height: 28vh;
          padding: 1vh;
        }
      }

      &:nth-child(5) {
        width: 48vw;
        height: 33vh;
        background: url('../../static/images/kuang-table.png') no-repeat;
        background-size: 100% 100%;
      }

      &:nth-child(6) {
        width: 22.5vw;
        height: 33vh;
        background: url('../../static/images/kuang-down.png') no-repeat;
        background-size: 100% 100%;
      }

      .kuang-title {
        font-size: 2.4vh;
        height: 3vh;
        color: #0ff;
        margin-left: 0.8vw;
        margin-top: 1vh;
        width: 6vw;
        display: inline;

        img {
          margin-top: 2vh;
          margin-left: 0.8vw;
          display: inline;
          width: 11vw;
        }
      }
    }
  }
}
</style>
